<template>
  <div class="city">
    <h2>省份列表</h2>
    <ul class="province2">
      <li
        v-for="(province, index) in provinces"
        :key="province.provinceName"
        @click="showCities(index)"
      >
        {{ province.provinceName }}
        <ul v-if="showCityList[index]" class="city-list">
          <li v-for="(city, index) in province.citys" :key="index" @click="showcityName(city)">
            {{ city.cityName }}
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>

  <script lang="ts">
import { defineComponent, ref } from 'vue'
import areaData from '../../address/city.json'
import { useRouter } from 'vue-router'

export default defineComponent({
  setup() {
    const router = useRouter()
    const provinces = ref(areaData.provinces)
    const showCityList = ref<boolean[]>([])
    for (let i = 0; i < provinces.value.length; i++) {
      showCityList.value.push(false)
    }
    const showCities = (index: number) => {
      showCityList.value[index] = !showCityList.value[index]
    }

    const showcityName = (city: any) => {
      localStorage.setItem('city1', JSON.stringify(city))
      router.push('/dizhi')
    }

    return {
      provinces,
      showCityList,
      showCities,
      showcityName
    }
  }
})
</script>
  <style>
.city {
  font-size: 0.6rem;
  position: relative;
  /* background: red; */
  width: 100%;
  height: 100vh;
}
.province2 {
  position: absolute;
  top: 1.4rem;
}
.province2 li {
  height: 1rem;
  line-height: 1rem;
  background: skyblue;
}

.city-list {
  position: absolute;
  top: 0rem;
  left: 5rem;
  width: 100%;
  height: 100vh;
  overflow: auto;
}
</style>